<label th:for="*{fields['__${field.name}__'].value}" th:classappend="${field.required ? 'required' : ''}" >
    <span th:utext="#{${field.friendlyName}}"></span>
<span th:replace="components/fieldTooltip" ></span>
</label>

<div>
    <input type="text" class="two color-picker-value" style="display: inline-block;" th:required="${field.required}" th:field="*{fields['__${field.name}__'].value}" th:disabled="${field.readOnly}"/>
    <input type="text" class="twelve color-picker" th:required="${field.required}" th:value="*{fields['__${field.name}__'].value}" th:disabled="${field.readOnly}"/>
</div>

<span class="error" th:errors="*{fields['__${field.name}__'].value}" ></span>
